// 基础绘图工具函数
const drawUtils = {
    // 设置画布尺寸和清除
    setupCanvas(canvas) {
        const ctx = canvas.getContext('2d');
        
        // 获取设备像素比
        const dpr = window.devicePixelRatio || 1;
        
        // 设置固定大小
        const fixedWidth = 500;
        const fixedHeight = 500;
        
        // 设置画布的实际像素大小
        canvas.width = fixedWidth * dpr;
        canvas.height = fixedHeight * dpr;
        
        // 设置画布的CSS显示大小
        canvas.style.width = `${fixedWidth}px`;
        canvas.style.height = `${fixedHeight}px`;
        
        // 缩放上下文以匹配设备像素比
        ctx.scale(dpr, dpr);
        
        // 清除画布
        ctx.clearRect(0, 0, fixedWidth, fixedHeight);
        
        // 设置抗锯齿和线条平滑
        ctx.imageSmoothingEnabled = true;
        ctx.imageSmoothingQuality = 'high';
        
        // 设置默认线条样式
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        
        return {
            ctx,
            width: fixedWidth,
            height: fixedHeight,
            dpr
        };
    },

    // 绘制坐标系
    drawCoordinateSystem(ctx, width, height) {
        const origin = { x: width/2, y: height/2 };
        
        // 绘制坐标轴
        ctx.beginPath();
        ctx.strokeStyle = '#ccc';
        ctx.lineWidth = 1;
        
        // X轴
        ctx.moveTo(50, origin.y);
        ctx.lineTo(width-50, origin.y);
        ctx.moveTo(width-60, origin.y-5);
        ctx.lineTo(width-50, origin.y);
        ctx.lineTo(width-60, origin.y+5);
        
        // Y轴
        ctx.moveTo(origin.x, height-50);
        ctx.lineTo(origin.x, 50);
        ctx.moveTo(origin.x-5, 60);
        ctx.lineTo(origin.x, 50);
        ctx.lineTo(origin.x+5, 60);
        
        ctx.stroke();
        
        // 绘制刻度
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = '#666';
        ctx.font = '12px Arial';
        
        // X轴刻度
        for(let i = -5; i <= 5; i++) {
            if(i === 0) continue;
            const x = origin.x + i * 40;
            ctx.fillText(i, x, origin.y + 20);
        }
        
        // Y轴刻度
        ctx.textAlign = 'right';
        for(let i = -5; i <= 5; i++) {
            if(i === 0) continue;
            const y = origin.y - i * 40;
            ctx.fillText(i, origin.x - 10, y);
        }
    },

    // 绘制点
    drawPoint(ctx, x, y, label = '', color = '#333', size = 4) {
        ctx.beginPath();
        ctx.arc(x, y, size, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.fill();
        
        if(label) {
            ctx.fillStyle = '#333';
            ctx.font = '14px Arial';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            ctx.fillText(label, x + 5, y - 5);
        }
    },

    // 绘制箭头
    drawArrow(ctx, fromX, fromY, toX, toY, color = '#333') {
        const headLength = 15;
        const angle = Math.atan2(toY - fromY, toX - fromX);
        
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.strokeStyle = color;
        ctx.stroke();

        // 绘制箭头
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI/6),
                  toY - headLength * Math.sin(angle - Math.PI/6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI/6),
                  toY - headLength * Math.sin(angle + Math.PI/6));
        ctx.stroke();
    },

    // 绘制角度标记
    drawAngleMark(ctx, x, y, startAngle, endAngle, radius = 30) {
        ctx.beginPath();
        ctx.arc(x, y, radius, -endAngle, -startAngle);
        ctx.stroke();
        
        // 添加角度文本
        const angle = ((endAngle - startAngle) * 180 / Math.PI).toFixed(0);
        const textAngle = -(startAngle + (endAngle - startAngle)/2);
        const textX = x + (radius + 15) * Math.cos(textAngle);
        const textY = y - (radius + 15) * Math.sin(textAngle);
        ctx.fillText(`${angle}°`, textX, textY);
    },

    // 绘制虚线
    drawDashedLine(ctx, x1, y1, x2, y2, dash = [5, 5]) {
        ctx.setLineDash(dash);
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        ctx.setLineDash([]);
    }
};

// 具体图形的绘制函数
export const drawFunctions = {
    // 点的绘制函数
    drawBasicPoint(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        
        // 绘制三个不同大小的点
        const points = [
            {x: width/4, y: height/2, size: 4, label: 'A'},
            {x: width/2, y: height/2, size: 6, label: 'B'},
            {x: 3*width/4, y: height/2, size: 8, label: 'C'}
        ];
        
        points.forEach(point => {
            drawUtils.drawPoint(ctx, point.x, point.y, point.label, '#FF6B6B', point.size);
        });
    },

    drawCoordinatePoint(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        drawUtils.drawCoordinateSystem(ctx, width, height);
        
        const origin = { x: width/2, y: height/2 };
        const points = [
            {x: 2, y: 1, label: 'A(2,1)'},
            {x: -1, y: 2, label: 'B(-1,2)'},
            {x: 1, y: -2, label: 'C(1,-2)'}
        ];
        
        points.forEach(point => {
            const screenX = origin.x + point.x * 40;
            const screenY = origin.y - point.y * 40;
            drawUtils.drawPoint(ctx, screenX, screenY, point.label, '#FF6B6B');
        });
    },

    // 线的绘制函数
    drawStraightLine(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        drawUtils.drawCoordinateSystem(ctx, width, height);
        
        // 绘制直线 y = 0.5x + 1
        ctx.beginPath();
        ctx.strokeStyle = '#4D96FF';
        ctx.lineWidth = 2;
        ctx.moveTo(50, height/2 - 40);
        ctx.lineTo(width-50, height/2 - (width-100) * 0.5);
        ctx.stroke();
        
        ctx.fillStyle = '#333';
        ctx.font = '14px Arial';
        ctx.fillText('y = 0.5x + 1', width-100, 50);
    },

    drawLineSegment(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        
        // 绘制两个端点和连接线段
        const p1 = {x: 100, y: 100};
        const p2 = {x: 300, y: 200};
        
        ctx.beginPath();
        ctx.strokeStyle = '#4D96FF';
        ctx.lineWidth = 2;
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
        
        drawUtils.drawPoint(ctx, p1.x, p1.y, 'A');
        drawUtils.drawPoint(ctx, p2.x, p2.y, 'B');
        
        // 标注长度
        const dx = p2.x - p1.x;
        const dy = p2.y - p1.y;
        const length = Math.sqrt(dx*dx + dy*dy).toFixed(1);
        ctx.fillText(`长度: ${length}`, (p1.x + p2.x)/2 + 10, (p1.y + p2.y)/2);
    },

    // 射线
    drawRay(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        
        // 绘制起点和射线
        const start = {x: 100, y: 200};
        drawUtils.drawPoint(ctx, start.x, start.y, 'O');
        drawUtils.drawArrow(ctx, start.x, start.y, 400, 100, '#4D96FF');
        
        // 添加说明文本
        ctx.fillStyle = '#333';
        ctx.font = '14px Arial';
        ctx.fillText('从O点出发的射线', 150, 150);
    },

    // 角
    drawAngle(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        const center = {x: width/2, y: height/2};
        const radius = 120;  // 射线长度

        // 绘制角的通用函数
        const drawAngleSet = (centerX, centerY, angle, color, label) => {
            ctx.save();
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;

            // 绘制水平射线
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.lineTo(centerX + radius, centerY);
            ctx.stroke();

            // 绘制第二条射线
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.lineTo(
                centerX + radius * Math.cos(-angle),
                centerY + radius * Math.sin(-angle)
            );
            ctx.stroke();

            // 绘制角度弧
            const arcRadius = 40;  // 增大弧的半径
            ctx.beginPath();
            ctx.arc(centerX, centerY, arcRadius, -angle, 0);
            ctx.stroke();

            // 添加角度标注
            const angleInDegrees = (angle * 180 / Math.PI).toFixed(0);
            ctx.fillStyle = color;
            ctx.font = '16px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            // 计算角度标注的位置
            const labelAngle = -angle / 2;  // 角度的一半位置
            const labelDistance = arcRadius + 15;  // 标注到顶点的距离
            const labelX = centerX + labelDistance * Math.cos(labelAngle);
            const labelY = centerY + labelDistance * Math.sin(labelAngle);

            // 绘制角度文本
            ctx.fillText(`${angleInDegrees}°`, labelX, labelY);

            // 添加标签
            ctx.fillStyle = color;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText(label, centerX, centerY + radius + 20);

            ctx.restore();
        };

        // 绘制锐角 (45°)
        drawAngleSet(
            center.x - 180,  // 左侧位置
            center.y,
            Math.PI/4,      // 45°
            '#FF6B6B',
            '锐角'
        );

        // 绘制直角 (90°)
        drawAngleSet(
            center.x,       // 中间位置
            center.y,
            Math.PI/2,     // 90°
            '#4D96FF',
            '直角'
        );

        // 在直角处添加小方框标记
        ctx.strokeStyle = '#4D96FF';
        ctx.lineWidth = 2;
        const boxSize = 20;
        ctx.beginPath();
        ctx.moveTo(center.x + boxSize, center.y);
        ctx.lineTo(center.x + boxSize, center.y - boxSize);
        ctx.lineTo(center.x, center.y - boxSize);
        ctx.stroke();

        // 绘制钝角 (135°)
        drawAngleSet(
            center.x + 180,  // 右侧位置
            center.y,
            Math.PI*3/4,    // 135°
            '#6BCB77',
            '钝角'
        );

        // 添加说明文字
        ctx.fillStyle = '#333';
        ctx.font = '14px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('角的大小：锐角 < 90°，直角 = 90°，钝角 > 90°', center.x, center.y + radius + 50);
    },

    // 三角形
    drawTriangle(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        
        // 绘制三种三角形
        // 等边三角形
        ctx.strokeStyle = '#FF6B6B';
        const equiHeight = 80 * Math.sqrt(3);
        ctx.beginPath();
        ctx.moveTo(100, 200);
        ctx.lineTo(180, 200);
        ctx.lineTo(140, 200-equiHeight);
        ctx.closePath();
        ctx.stroke();
        ctx.fillText('等边三角形', 100, 220);
        
        // 直角三角形
        ctx.strokeStyle = '#4D96FF';
        ctx.beginPath();
        ctx.moveTo(250, 200);
        ctx.lineTo(330, 200);
        ctx.lineTo(250, 120);
        ctx.closePath();
        ctx.stroke();
        ctx.strokeRect(245, 195, 10, 10); // 直角符号
        ctx.fillText('直角三角形', 250, 220);
        
        // 等腰三角形
        ctx.strokeStyle = '#6BCB77';
        ctx.beginPath();
        ctx.moveTo(400, 200);
        ctx.lineTo(480, 200);
        ctx.lineTo(440, 120);
        ctx.closePath();
        ctx.stroke();
        ctx.fillText('等腰三角形', 400, 220);
    },

    // 四边形
    drawQuadrilateral(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        
        // 绘制几种四边形
        // 正方形
        ctx.strokeStyle = '#FF6B6B';
        ctx.strokeRect(50, 50, 80, 80);
        ctx.fillText('正方形', 60, 150);
        
        // 矩形
        ctx.strokeStyle = '#4D96FF';
        ctx.strokeRect(180, 50, 120, 80);
        ctx.fillText('矩形', 220, 150);
        
        // 平行四边形
        ctx.strokeStyle = '#6BCB77';
        ctx.beginPath();
        ctx.moveTo(350, 50);
        ctx.lineTo(470, 50);
        ctx.lineTo(440, 130);
        ctx.lineTo(320, 130);
        ctx.closePath();
        ctx.stroke();
        ctx.fillText('平行四边形', 370, 150);
    },

    // 多边形
    drawPolygon(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        const center = {x: width/2, y: height/2};
        const radius = 100;
        
        // 绘制正五边形
        ctx.strokeStyle = '#4D96FF';
        ctx.beginPath();
        for(let i = 0; i < 5; i++) {
            const angle = i * 2 * Math.PI / 5 - Math.PI/2;
            const x = center.x + radius * Math.cos(angle);
            const y = center.y + radius * Math.sin(angle);
            if(i === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
        }
        ctx.closePath();
        ctx.stroke();
        ctx.fillText('正五边形', center.x-30, center.y+radius+30);
    },

    // 圆
    drawCircle(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        const center = {x: width/2, y: height/2};
        const radius = 100;
        
        // 绘制圆
        ctx.strokeStyle = '#4D96FF';
        ctx.beginPath();
        ctx.arc(center.x, center.y, radius, 0, Math.PI * 2);
        ctx.stroke();
        
        // 绘制半径
        ctx.strokeStyle = '#FF6B6B';
        ctx.beginPath();
        ctx.moveTo(center.x, center.y);
        ctx.lineTo(center.x + radius, center.y);
        ctx.stroke();
        ctx.fillText('r', center.x + radius/2, center.y - 10);
        
        // 绘制圆心
        drawUtils.drawPoint(ctx, center.x, center.y, 'O');
    },

    // 弧和扇形
    drawArcAndSector(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        const center = {x: width/2, y: height/2};
        const radius = 100;
        
        // 绘制弧
        ctx.strokeStyle = '#4D96FF';
        ctx.beginPath();
        ctx.arc(center.x, center.y, radius, -Math.PI/3, Math.PI/6);
        ctx.stroke();
        
        // 绘制扇形
        ctx.strokeStyle = '#6BCB77';
        ctx.beginPath();
        ctx.moveTo(center.x, center.y);
        ctx.arc(center.x, center.y, radius, Math.PI/2, Math.PI);
        ctx.closePath();
        ctx.stroke();
        
        // 添加标注
        ctx.fillText('弧', center.x + 50, center.y - 50);
        ctx.fillText('扇形', center.x - 70, center.y - 20);
    },

    // 立方体
    drawCube(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        const center = {x: width/2, y: height/2};
        const size = 80;
        
        // 绘制前面的正方形
        ctx.strokeStyle = '#4D96FF';
        ctx.strokeRect(center.x-size/2, center.y-size/2, size, size);
        
        // 绘制后面的正方形
        const offset = 40;
        ctx.beginPath();
        ctx.moveTo(center.x-size/2+offset, center.y-size/2-offset);
        ctx.lineTo(center.x+size/2+offset, center.y-size/2-offset);
        ctx.lineTo(center.x+size/2+offset, center.y+size/2-offset);
        ctx.lineTo(center.x-size/2+offset, center.y+size/2-offset);
        ctx.closePath();
        ctx.stroke();
        
        // 绘制连接线
        drawUtils.drawDashedLine(ctx, 
            center.x-size/2, center.y-size/2,
            center.x-size/2+offset, center.y-size/2-offset
        );
        drawUtils.drawDashedLine(ctx,
            center.x+size/2, center.y-size/2,
            center.x+size/2+offset, center.y-size/2-offset
        );
        drawUtils.drawDashedLine(ctx,
            center.x+size/2, center.y+size/2,
            center.x+size/2+offset, center.y+size/2-offset
        );
        drawUtils.drawDashedLine(ctx,
            center.x-size/2, center.y+size/2,
            center.x-size/2+offset, center.y+size/2-offset
        );
    },

    // 球体
    drawSphere(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        const center = {x: width/2, y: height/2};
        const radius = 100;  // 增大半径
        
        ctx.strokeStyle = '#4D96FF';
        ctx.lineWidth = 2;

        // 绘制主圆（正视图）
        ctx.beginPath();
        ctx.arc(center.x, center.y, radius, 0, Math.PI * 2);
        ctx.stroke();

        // 绘制水平椭圆（表示立体感）
        ctx.beginPath();
        ctx.save();
        ctx.translate(center.x, center.y);
        ctx.scale(1, 0.3);
        ctx.arc(0, 0, radius, 0, Math.PI * 2);
        ctx.restore();
        ctx.stroke();

        // 绘制垂直椭圆（表示立体感）
        ctx.beginPath();
        ctx.save();
        ctx.translate(center.x, center.y);
        ctx.scale(0.3, 1);
        ctx.arc(0, 0, radius, 0, Math.PI * 2);
        ctx.restore();
        ctx.stroke();

        // 绘制虚线部分（隐藏边）
        ctx.setLineDash([5, 5]);
        
        // 绘制后半部分的水平椭圆
        ctx.beginPath();
        ctx.save();
        ctx.translate(center.x, center.y);
        ctx.scale(1, 0.3);
        ctx.arc(0, 0, radius, 0, Math.PI);
        ctx.restore();
        ctx.stroke();
        
        // 绘制后半部分的垂直椭圆
        ctx.beginPath();
        ctx.save();
        ctx.translate(center.x, center.y);
        ctx.scale(0.3, 1);
        ctx.arc(0, 0, radius, -Math.PI/2, Math.PI/2);
        ctx.restore();
        ctx.stroke();
        
        ctx.setLineDash([]);

        // 添加标注
        ctx.fillStyle = '#333';
        ctx.font = '14px Arial';
        ctx.textAlign = 'center';
        
        // 标注半径
        ctx.beginPath();
        ctx.moveTo(center.x, center.y);
        ctx.lineTo(center.x + radius, center.y);
        ctx.stroke();
        ctx.fillText('r', center.x + radius/2, center.y - 10);

        // 标注圆心
        ctx.beginPath();
        ctx.arc(center.x, center.y, 2, 0, Math.PI * 2);
        ctx.fill();
        ctx.fillText('O', center.x - 15, center.y + 15);

        // 添加说明文字
        ctx.textAlign = 'center';
        ctx.fillText('球体的任意截面都是圆', center.x, center.y + radius + 30);
    },

    // 圆锥
    drawCone(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        const center = {x: width/2, y: height/2};
        const radius = 100;  // 底圆半径
        const coneHeight = 160;  // 圆锥高度
        const topPoint = {x: center.x, y: center.y - coneHeight/2};  // 顶点
        const bottomCenter = {x: center.x, y: center.y + coneHeight/2};  // 底面圆心

        // 绘制底圆（椭圆）
        ctx.strokeStyle = '#4D96FF';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.save();
        ctx.translate(bottomCenter.x, bottomCenter.y);
        ctx.scale(1, 0.3);  // 压缩成椭圆
        ctx.arc(0, 0, radius, 0, Math.PI * 2);
        ctx.restore();
        ctx.stroke();

        // 绘制母线（侧边）
        ctx.beginPath();
        ctx.moveTo(topPoint.x, topPoint.y);  // 顶点
        ctx.lineTo(bottomCenter.x - radius, bottomCenter.y);  // 左侧点
        ctx.moveTo(topPoint.x, topPoint.y);  // 返回顶点
        ctx.lineTo(bottomCenter.x + radius, bottomCenter.y);  // 右侧点
        ctx.stroke();

        // 绘制虚线（隐藏边）
        ctx.setLineDash([5, 5]);
        ctx.beginPath();
        ctx.moveTo(bottomCenter.x - radius, bottomCenter.y);
        ctx.lineTo(bottomCenter.x + radius, bottomCenter.y);
        ctx.stroke();
        ctx.setLineDash([]);

        // 添加标注
        ctx.fillStyle = '#333';
        ctx.font = '14px Arial';
        ctx.textAlign = 'center';
        
        // 标注高度
        ctx.fillText('h', center.x - 20, center.y);
        
        // 标注底面半径
        ctx.fillText('r', center.x + radius/2, bottomCenter.y + 20);
        
        // 标注母线
        ctx.fillText('l', center.x + radius/2 + 10, center.y);
    },

    // 棱柱（三棱柱）
    drawPrism(canvas) {
        const { ctx, width, height } = drawUtils.setupCanvas(canvas);
        const center = {x: width/2, y: height/2};
        const size = 100;  // 三角形边长
        const depth = 60;  // 棱柱深度
        const h = size * Math.sqrt(3) / 2;  // 三角形高

        // 绘制前后两个三角形
        const drawTriangle = (offsetX) => {
            ctx.beginPath();
            // 从顶点开始，逆时针绘制三角形
            ctx.moveTo(center.x + offsetX, center.y - h/2);  // 顶点
            ctx.lineTo(center.x + offsetX - size/2, center.y + h/2);  // 左下
            ctx.lineTo(center.x + offsetX + size/2, center.y + h/2);  // 右下
            ctx.closePath();
            ctx.stroke();
        };

        // 设置样式
        ctx.strokeStyle = '#4D96FF';
        ctx.lineWidth = 2;

        // 绘制后面的三角形（虚线）
        ctx.setLineDash([5, 5]);
        drawTriangle(depth);
        ctx.setLineDash([]);

        // 绘制前面的三角形
        drawTriangle(0);

        // 绘制连接线
        ctx.beginPath();
        // 顶点连线
        ctx.moveTo(center.x, center.y - h/2);
        ctx.lineTo(center.x + depth, center.y - h/2);
        // 左下角连线
        ctx.moveTo(center.x - size/2, center.y + h/2);
        ctx.lineTo(center.x - size/2 + depth, center.y + h/2);
        // 右下角连线
        ctx.moveTo(center.x + size/2, center.y + h/2);
        ctx.lineTo(center.x + size/2 + depth, center.y + h/2);
        ctx.stroke();

        // 添加标注
        ctx.fillStyle = '#333';
        ctx.font = '14px Arial';
        ctx.textAlign = 'center';
        
        // 标注高度
        ctx.fillText('h', center.x - size/2 - 20, center.y);
        
        // 标注底边
        ctx.fillText('a', center.x, center.y + h/2 + 20);
        
        // 标注深度
        ctx.fillText('d', center.x + depth/2, center.y - h/2 - 10);
    },

    // 长方体
    drawCuboid(canvas) {
        const { ctx, width: canvasWidth, height: canvasHeight } = drawUtils.setupCanvas(canvas);
        const center = {x: canvasWidth/2, y: canvasHeight/2};
        const boxWidth = 100;      // 改名为 boxWidth
        const boxHeight = 60;      // 改名为 boxHeight
        const depth = 80;
        
        // 绘制前面的矩形
        ctx.strokeStyle = '#4D96FF';
        ctx.strokeRect(
            center.x-boxWidth/2, 
            center.y-boxHeight/2, 
            boxWidth, 
            boxHeight
        );
        
        // 绘制后面的矩形
        const offset = 40;
        ctx.beginPath();
        ctx.moveTo(center.x-boxWidth/2+offset, center.y-boxHeight/2-offset);
        ctx.lineTo(center.x+boxWidth/2+offset, center.y-boxHeight/2-offset);
        ctx.lineTo(center.x+boxWidth/2+offset, center.y+boxHeight/2-offset);
        ctx.lineTo(center.x-boxWidth/2+offset, center.y+boxHeight/2-offset);
        ctx.closePath();
        ctx.stroke();
        
        // 绘制连接线
        drawUtils.drawDashedLine(ctx, 
            center.x-boxWidth/2, center.y-boxHeight/2,
            center.x-boxWidth/2+offset, center.y-boxHeight/2-offset
        );
        drawUtils.drawDashedLine(ctx,
            center.x+boxWidth/2, center.y-boxHeight/2,
            center.x+boxWidth/2+offset, center.y-boxHeight/2-offset
        );
        drawUtils.drawDashedLine(ctx,
            center.x+boxWidth/2, center.y+boxHeight/2,
            center.x+boxWidth/2+offset, center.y+boxHeight/2-offset
        );
        drawUtils.drawDashedLine(ctx,
            center.x-boxWidth/2, center.y+boxHeight/2,
            center.x-boxWidth/2+offset, center.y+boxHeight/2-offset
        );

        // 添加标注
        ctx.fillStyle = '#333';
        ctx.font = '14px Arial';
        ctx.fillText('长', center.x - boxWidth/4, center.y + boxHeight/2 + 20);
        ctx.fillText('宽', center.x + boxWidth/2 + offset/2, center.y);
        ctx.fillText('高', center.x - boxWidth/2 - 20, center.y);
    }
}; 